<template>
  <div class="qq_Wonderful_recommend" id="content">
    <div class="swiper-father">
      <div class="swiper-container" id="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="qq_WC_section_inner">
              <div class="index__hd">
                <h2 class="index__tit"><i class="icon_txt"></i></h2>
              </div>
              <!-- <a class="qq_WC_index__more">
        更多<i class="icon_index_arrow sprite"></i>
      </a> -->
              <div class="qq_WC_mod_event">
                <ul class="qq_WC_event_list">

                  <li class="qq_WC_event_list__item">
                    <a class="qq_WC_event_list__link">
                      <img class="qq_WC_event_list__pic"
                        src="//y.qq.com/music/common/upload/MUSIC_FOCUS/4471232.jpg?max_age=2592000">
                    </a>
                  </li>
                  <li class="qq_WC_event_list__item">
                    <a class="qq_WC_event_list__link">
                      <img class="qq_WC_event_list__pic"
                        src="//y.qq.com/music/common/upload/MUSIC_FOCUS/4472319.jpg?max_age=2592000">
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="qq_WC_section_inner">
              <div class="index__hd">
                <h2 class="index__tit"><i class="icon_txt"></i></h2>
              </div>
              <!-- <a class="qq_WC_index__more">
        更多<i class="icon_index_arrow sprite"></i>
      </a> -->
              <div class="qq_WC_mod_event">
                <ul class="qq_WC_event_list">

                  <li class="qq_WC_event_list__item">
                    <a class="qq_WC_event_list__link">
                      <img class="qq_WC_event_list__pic"
                        src="//y.qq.com/music/common/upload/MUSIC_FOCUS/4471232.jpg?max_age=2592000">
                    </a>
                  </li>
                  <li class="qq_WC_event_list__item">
                    <a class="qq_WC_event_list__link">
                      <img class="qq_WC_event_list__pic"
                        src="//y.qq.com/music/common/upload/MUSIC_FOCUS/4472319.jpg?max_age=2592000">
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination" id="sw-pa"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev" id="sw-bu-pr" ref="sw-bu-pr"></div>
      <div class="swiper-button-next" id="sw-bu-ne" ref="sw-bu-ne"></div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "WonderfulRecommend",
};
</script>
<script lang="ts" setup>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import { onMounted, ref } from "vue";
onMounted(() => {
  new Swiper("#swiper", {
    spaceBetween: 20,
    speed: 1000, //切换时间
    loop: true, //无缝轮播
    pagination: {
      //小圆点
      el: ".swiper-pagination", //选择到小圆点容器
      clickable: true, //在控制小圆点是否可以被点击
    },
    navigation: {
      //左右按钮
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
  });
});
</script>

<style scoped>
/* 鼠标移入自动显示 */
.qq_Wonderful_recommend:hover #sw-bu-pr {
  display: block;
  animation: pr 1s;
  left: -160px;
}

.qq_Wonderful_recommend:hover #sw-bu-ne {
  display: block;
  animation: ne 1s;
  right: -160px;
}

/* 定义鼠标移入左右箭头的关键帧 */
@keyframes pr {
  0% {
    left: -300px;
  }

  100% {
    left: -160px;
  }
}

@keyframes ne {
  0% {
    right: -300px;
  }

  100% {
    right: -160px;
  }
}

/* 设置轮播图样式 对轮播图样式作二次修改 修改样式权重*/
#sw-pa {
  /* border: 1px solid red !important; */
  position: absolute;
  right: 50%;
  width: 60px;
  display: flex;
  justify-content: space-around;
  bottom: -120px;
}

#sw-pa .swiper-pagination-bullet {
  /* border: 1px solid green !important; */
  position: absolute !important;
}

/* #swiper {
   border: 1px solid red !important;
} */
.swiper-container {
  /* border: 1px solid red !important; */
  width: 1200px;
  /* height: 532px; */
}

.swiper-father {
  /* border: 1px solid green !important; */
  height: 224px;
  /* width: 1700px; */
  position: relative;
}

#sw-bu-pr,
#sw-bu-ne {
  position: absolute !important;
  /* border: 1px solid red; */
  display: inline-block;
  width: 100px;
  height: 133px;
  text-align: center;
  line-height: 133px;
  background-color: #e1e1e1;
  color: #000;
  top: 65.5px;
  z-index: 200;
}

#sw-bu-pr,
#sw-bu-ne {
  display: none;
}

#sw-bu-pr {
  left: -300px;
}

#sw-bu-ne {
  right: -300px;
}

/* 第四部分 */
.index__hd {
  position: relative;
  padding-top: 4.16667%;
  padding-bottom: 2%;
}

.index__hd .index__tit {
  margin: 0 auto;
  width: 196px;
  height: 40px;
  font-weight: bold;
  font-style: normal;
  /* background-image: url("./bac.png"); */
  background-image: -webkit-image-set(url("/src/assets/bac.png") 1x, url("/src/assets/bac.png") 2x);
  background-position: 0 580px;
}

.qq_Wonderful_recommend {
  height: 418px;
  background-color: #f8f8f8;
}

.qq_WC_section_inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.qq_WC_event_list {
  width: 1240px;
  font-size: 0;
}

.qq_WC_event_list>li {
  width: 590px;
  height: 236px;
  padding-right: 20px;
  display: inline-block;
  white-space: nowrap;
}

.qq_WC_event_list>li img {
  width: 590px;
  height: 236px;
  display: inline-block;
}
</style>